<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/animation.css">
</head>

<body>
    <div class="controls">
        <input type="button" value="移动到400" id="move1">
        <input type="button" value="移动到800" id="move2">
        <input type="button" value="移动到0点" id="move3">
    </div>
    <div class="content content1">
        <div class="core" id="core"></div>
    </div>
    <div class="controls">
        <input type="button" value="变宽到400px" id="animate1">
        <input type="button" value="变高到300p'x" id="animate2">
        <input type="button" value="移动到800px" id="animate3">
        <input type="button" value="透明度变成0.5" id="animate4">
        <input type="button" value="还原" id="animate5">
    </div>
    <div class="content">
        <div class="core" id="core1"></div>
    </div>
    <div class="controls">
        <input type="button" value="width:400px,height:300px,left:800px" id="animation1">
        <input type="button" value="opcity:0.5" id="animation2">
        <input type="button" value="zIndex:99,width:80px,height:80px,top:-20px,left:20px" id="animation3">
        <input type="button" value="backgroundColor:yellowgreen" id="animation4">
        <input type="button" value="还原" id="animationx">
    </div>
    <div class="content">
        <div class="core" id="core2"></div>
    </div>
    <script src="../../js/animation.js"></script>
</body>

</html>